<template>
    <div class="map" v-if="prosps.hidden">
        <header class="marginBottom2">
            <button class="FontSize_word" @click="Back">&lt;&nbsp;&nbsp;返 回</button>
        </header>
        <main>
            <div class="moduleOne">
                <div class="moduleOneBox ">
                    <div class="moduleOneCentent">
                        <button class="FontSize_word" @click="FlagMapDetailsPopup">帝国简介</button>
                    </div>
                    <div class="moduleOneCentent">
                        <button class="FontSize_word" @click="MapDrawerBut(1)">地图探索</button>
                    </div>
                    <div class="moduleOneCentent">
                        <button class="FontSize_word" @click="MapDrawerBut(2)">地图剧情</button>
                    </div>
                </div>
            </div>
        </main>
        <!-- 地图列表弹窗 -->
        <Zky_Drawer v-model:hidden="MapDrawer" :title="'地图介绍'">
            <div class="MapdetailsBox FontSize_text">
                <div class="Mapdetails">
                    <div class="" v-for="item in Main.MapList.mapInformations">
                        {{ item.mapName }}<button class="FontSize_word" @click="MapBrowse(item)"
                            v-if="MapPlot == 1 && item.state == 1">浏览</button>
                        <button class="FontSize_word" v-if="MapPlot == 1 && item.state == 2"
                            @click="ActivateMap(item.mapId)">激活</button>
                        <button class="FontSize_word" @click="PlotExploration(item.mapId)" v-if="MapPlot == 2">探索</button>
                    </div>
                </div>
            </div>
        </Zky_Drawer>
        <!-- 地图详情弹窗 -->
        <div class="MapListPopup " v-if="MapListPopup">
            <div class="MapListHeader">
                <div class="MapListHeaderBox">
                    <div class="FontSize_Title marginBottom1" style="text-align: center;">
                        {{ MapList.mapName }} <sub class="FontSize_text" @click="MapBack">返回</sub>
                    </div>
                    <div class="MapListHeaderContent FontSize_text">
                        <span>饱食度：{{ Main.Character.satiety }}</span>
                        <span>地图大小：{{ MapList.totalCoordinate[0] }}*{{ MapList.totalCoordinate[1] }}</span>
                        <span>宝箱数量：{{ MapListInfortion.Chest }}</span>
                        <span>npc数量：{{ MapListInfortion.npc }}</span>
                        <span>事件数量：{{ MapListInfortion.incident }}</span>
                    </div>
                </div>
            </div>
            <div class="MapListMain FontSize_text">
                <div class="MapListMainBox">
                    <div class="MapListMainBoxData" v-for="item in  MapList.coordinate" @click="Coordinate(item)">
                        <img :src="item.icon" alt="" v-if="item.coordinateType == 2 || item.coordinateType == 3">
                        <span v-if="item.coordinateType == 1"> 空地</span>
                        <span v-if="item.coordinateType == 5"> 鱼池</span>
                        <span v-if="item.coordinateType == 4"> 树林</span>
                    </div>
                </div>
            </div>
            <div class="MapListFooter FontSize_text">
                <div class="MapListFooterMain">
                    <div v-if="CoordinateList" class="MapListFooterBox">
                        <div class="MapListFooterTotal">
                            <div style="width:100%">
                                <!-- <div class="marginBottom1" style="text-align: center; ">说明</div> -->
                                <div> 坐标：{{ CoordinateList.coordinateId[0] + 1 }}*{{ CoordinateList.coordinateId[1] + 1 }}
                                </div>
                                <div v-if='CoordinateList.coordinateType === 1'>名称：空地</div>
                                <div v-if='CoordinateList.coordinateType === 3'>名称：宝箱</div>
                                <div v-if='CoordinateList.coordinateType === 4'>名称：树林</div>
                                <div v-if='CoordinateList.coordinateType === 5'>名称：鱼池</div>
                                <div v-if='CoordinateList.coordinateType === 2' class="marginBottom1">名称：{{
                                    CoordinateList.npc.npcName }}</div>
                                <button v-if='CoordinateList.coordinateType === 2' style="text-align:center;margin:0;"
                                    class="FontSize_word" @click="Rewards(CoordinateList.npc)">奖励</button>
                            </div>
                        </div>
                        <div class="MapListFooterTotal MapListFooterModel2">
                            <div style="width:100%">
                                <!-- <div class="marginBottom1" style="text-align: center; ">介绍</div> -->
                                <div v-if='CoordinateList.coordinateType === 1'>稀疏平常的土地，但也许能在这片土地中找到好东西</div>
                                <div v-if='CoordinateList.coordinateType === 3'>散落在野外的宝箱,打开可能有意想不到的宝物。</div>
                                <div v-if='CoordinateList.coordinateType === 4'>一大片树林，可以使用工具获取木材</div>
                                <div v-if='CoordinateList.coordinateType === 5'>一大片水池，里面仿佛还有鱼。</div>
                                <div v-if='CoordinateList.coordinateType === 2'>{{ CoordinateList.npc.details }}</div>
                            </div>
                        </div>
                        <div class="MapListFooterTotal">
                            <div style="width:100%">
                                <!-- <div class="marginBottom1" style="text-align: center; ">操作</div> -->
                                <div v-if="CoordinateList.incident == 0 && CoordinateList.coordinateType === 1"
                                    style="text-align: center; ">无操作</div>
                                <div style="text-align: center;"
                                    v-if="CoordinateList.incident != 0 && CoordinateList.coordinateType === 1">
                                    <button class="FontSize_word" style="margin: 0;" @click="ExploreMap">探索</button>
                                </div>
                                <div style="text-align: center;" v-if="CoordinateList.coordinateType === 3">
                                    <button class="FontSize_word" style="margin: 0;"
                                        @click="Unlock('道具', '您没有钥匙', 1)">打开宝箱</button>
                                </div>
                                <div v-if="CoordinateList.coordinateType === 2">
                                    <div>{{ CoordinateList.npc.likability }}/{{ CoordinateList.npc.totalLikability }}</div>
                                    <div> <button class="FontSize_text" style="margin: 0;"
                                            @click="Unlock('道具', '您没有提升好感物品', 2)">提升好感</button></div>
                                    <div>
                                        <div class="discourse" v-for="(item, index) in  CoordinateList.npc.discourse">
                                            <span v-if="index <= CoordinateList.npc.likabilityType">tips:{{ item }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div style="text-align: center;" v-if="CoordinateList.coordinateType === 4">
                                    <div class="marginBottom1">剩余资源：{{ CoordinateList.resource }}</div>
                                    <button class="FontSize_word" style="margin: 0;"
                                        @click="AcquireResources('gong3')">获取木材</button>
                                </div>
                                <div style="text-align: center;" v-if="CoordinateList.coordinateType === 5">
                                    <div class="marginBottom1">剩余资源：{{ CoordinateList.resource }}</div>
                                    <button class="FontSize_word" style="margin: 0;"
                                        @click="AcquireResources('gong4')">获取鱼肉</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else>
                        无操作
                    </div>
                </div>

            </div>
        </div>

        <!--  使用物品弹窗 -->
        <Zky_BackpackPopup v-model:hidden="ItemUsePopup" :titleHidden="false" :FoorthHidden="false">
            <div v-if="ItemUseList.length > 0" style="height:80vh">
                <div class="ItemUsePopupBox">
                    <div class="ItemUsePopup">
                        <div class="GirdBackpack_XXXL GirdBackpack_XXL GirdBackpack_XL GirdBackpack_X FontSize_text ">
                            <div v-for="item in ItemUseList" class="ItemUsePopupChildren">
                                <div style="text-align: center;padding:4px" class="Name"
                                    :class="item.itemEvaluate == 1 ? '' : item.itemEvaluate == 2 ? 'Color2' : item.itemEvaluate == 3 ? 'Color3' : ''">
                                    {{ item.itemName }}
                                </div>
                                <div class="" style="text-align: center;padding:4px">数量： {{ item.itemNum
                                }}</div>
                                <div class="Use" @click="UseSeed(item)">使用</div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
            <div v-else class="FontSize_Title">
                {{ ItemUseError }}
            </div>
        </Zky_BackpackPopup>

        <!-- 随机事件弹窗 -->
        <Zky_Popup v-model:hidden="IncidentPopup" :title="IncidentTitle" :overflowhidden="true" :ConfirmlHidden="false">
            <p>{{ IncidentWord }}</p>
            <p>{{ IncidentRewards }}</p>
        </Zky_Popup>
        <!-- 剧情页面 -->
        <Zky_BackpackPopup v-model:hidden="PlotPopup" :titleHidden="false" :FoorthHidden="false">
            <div class="Plot">
                <div class="PlotHeader FontSize_Title">
                    <div style="text-align:center" class="marginBottom1"> {{ PlotList.plot.plotName }}</div>
                    <div class="FontSize_text PlotHeaderContent">
                        <span>攻击：{{ PlotList.aTK }}</span>
                        <span>防御：{{ PlotList.dEF }}</span>
                        <span>首次探索：{{ PlotList.storyStatus == 1 ? "是" : "否" }}</span>
                    </div>
                </div>
                <div class="PlotContent">
                    <div class="PlotContentBox FontSize_word">
                        <div class="marginBottom2 PlotContentBoxContent">{{ PlotList.plot.plotDetails }}</div>
                        <div class="marginBottom2" style="text-align:center">奖励：{{
                            PlotList.plot.plotRewards }}</div>
                        <div style="text-align:center">
                            <button v-for="item in PlotList.plotBranch" class="FontSize_word"
                                @click="PlotExplorationId(item.id)">{{ item.name }}</button>
                            <button class="FontSize_word" v-if="PlotList.storyType != 1" @click="Restart()">重新开始</button>
                            <button class="FontSize_word" v-if="PlotList.storyType == 1"
                                @click="PlotPopup = false">返回</button>
                        </div>
                    </div>
                </div>
            </div>
        </Zky_BackpackPopup>
        <!--  查询npc奖励 -->
        <Zky_BackpackPopup v-model:hidden="NpcPopup" :titleHidden="false" :FoorthHidden="false">
            <div class="Rewards">
                <div class="FontSize_text RewardsBox" v-for="(item, index) in RewardsList">
                    <div class="RewardsBoxName">
                        {{ item.name }}*{{ item.num }}
                    </div>
                    <button class="FontSize_word" :disabled="item.status != 1" @click="ReceiveAward(index)">{{ item.status
                        == 1 ? "领取奖励" : item.status ==
                            2
                        ? "已领取" : item.status == 3
                            ? "友好度不够" : ""
                    }}</button>
                </div>
            </div>
        </Zky_BackpackPopup>
        <!--  获得物品弹窗 -->
        <Zky_BackpackPopup v-model:hidden="ItemObtained" :titleHidden="true" :FoorthHidden="true">
            <div>
                <span
                    :class="ItemObtainedList.itemEvaluate == 1 ? '' : ItemObtainedList.itemEvaluate == 2 ? 'Color2' : ItemObtainedList.itemEvaluate == 3 ? 'Color3' : ''">{{
                        ItemObtainedList.itemName }}</span>*<span>{{ ItemObtainedList.itemNum }}</span>
            </div>
        </Zky_BackpackPopup>
        <!-- 简介 -->
        <Zky_BackpackPopup v-model:hidden="MapDetailsPopup" :titleHidden="false" :FoorthHidden="false">
            <div class="FontSize_text MapDetailsPopup">
                {{ MapDetails }}
            </div>
        </Zky_BackpackPopup>
        <!-- 初始化地图数据 -->
        <Zky_Loading v-model:hidden="Loging">

        </Zky_Loading>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue"
import Axios from "../../Axios";
import { main } from "../../store";
import Alert from "../../components/Com/Alert/index"
import ren from "../../assets/SVG/ren.svg"
import Bx from "../../assets/SVG/baoxiang.svg"
const Main = main()
const prosps = defineProps(["hidden"])
const emit = defineEmits(["update:hidden"])
const Loging = ref(false)
const MapDetailsPopup = ref(false) // 地图简介弹窗
const MapDrawer = ref(false)  // 地图详细弹窗
const MapListPopup = ref(false)  // 控制地图详细弹窗显示
const MapList = ref()// 当前需要浏览的地图信息
const CoordinateList = ref()  // 显示当前的地图坐标
const ItemUseList = ref(); // 要被使用的物品
const IncidentWord = ref(); // 使用物品弹窗
const IncidentRewards = ref(); // 使用物品弹窗
const IncidentTitle = ref(); // 
const IncidentPopup = ref(); // 控制探索事件弹窗显示
const ItemUsePopup = ref(false)  // 控制物品使用弹窗显示
const ItemUseError = ref("") //当使用弹窗没有物品时候显示的内容
const ItemUseFlag = ref(true) // 规范使用弹窗情况，
const ItemObtained = ref(false) // 控制获得物品弹窗显示
const ItemObtainedList = ref("") // 事件所获得的物品
const MapPlot = ref(1) // 用于控制地图介绍出现的是浏览还是探索
const PlotList = ref()// 当前探索的地图剧情
const PlotPopup = ref(false) //控制剧情弹窗显示
const NpcPopup = ref(false) // 控制npc弹窗显示
const RewardsList = ref([]) // 显示奖励数组

const MapListInfortion = ref({  // 当前地图详细信息
    npc: 0,  // npc数量
    Chest: 0,  // 宝箱数量
    incident: 0 // 事件数量
})
const MapDetails = ref("渊历40236年黑暗腐蚀天下，黑暗降临初期，这片大陆的统治者神权王朝率领者他们忠实的将士拼死抵抗，只为保护身后的家人。凡人之躯虽以命相搏终究无法取胜，原本富强的大陆在这场黑暗的侵蚀之后分崩离析，王朝也因此倒塌。不止何年天门降世，天族帮助人族崛起对抗黑暗，最终在击溃了黑暗，然而人类却再也没有团结起来过，至此人族衰败。")
const Back = () => {
    emit("update:hidden", false)
}
// 获取当前资源
const AcquireResources = async (id) => {
    let one = Main.Character.itemDetails.filter(el => el.itemId == id);
    if (one.length <= 0) {
        Alert({
            title: "没有对应工具，无法获取资源",
            type: "error",
            time: 2000
        })
        return
    }
    const res = await Axios("/Game/AcquireResources", "POST", CoordinateList.value);
    if (res.code == 200) {
        await Main.AtlasAll()
        Main.ADDCHARACTERS()
        Main.MapList.mapInformations.forEach(el => {
            if (el.mapId == MapList.value.mapId) {
                MapBrowse(el)
                el.coordinate.forEach(el1 => {
                    if (el1.coordinateId[0] == CoordinateList.value.coordinateId[0] && el1.coordinateId[1] == CoordinateList.value.coordinateId[1]) {
                        Coordinate(el1)
                    }
                })
            }
        })
        Alert({
            title: `${res.data.itemName}*${res.data.itemNum}`,
            time: 2000
        })
    } else {
        Alert({
            title: res.message,
            type: "error",
            time: 2000
        })
    }

}
// 激活地图
const ActivateMap = (id) => {
    ItemUseList.value = []
    let seed = JSON.parse(JSON.stringify(Main.Character.itemDetails))
    if (id == "map2") {
        ItemUseList.value = seed.filter(el => el.itemId == "map1")
    }
    // ItemUseList.value = seed.filter(el => el.itemType == type)

    ItemUseError.value = "没有指定地图"
    ItemUsePopup.value = true
}
// 领取npc奖励
const ReceiveAward = async (num) => {
    let npc = JSON.parse(JSON.stringify(CoordinateList.value.npc))
    npc.icon = num
    const res = await Axios("/Game/ReceiveAward", "POST", npc);
    if (res.code == 200) {
        await Main.AtlasAll()
        Main.ADDCHARACTERS()
        Main.MapList.mapInformations.forEach(el => {
            if (el.mapId == MapList.value.mapId) {
                MapBrowse(el)
                el.coordinate.forEach(el1 => {
                    if (el1.coordinateId[0] == CoordinateList.value.coordinateId[0] && el1.coordinateId[1] == CoordinateList.value.coordinateId[1]) {
                        Coordinate(el1)
                    }
                })
            }
        })
        ItemObtained.value = true
        ItemObtainedList.value = res.data
        Rewards(CoordinateList.value.npc)
    }
}

// 点击奖励按钮
const Rewards = (item) => {
    RewardsList.value = []
    item.rewards.forEach(el => {
        RewardsList.value.push({
            name: el.split("-")[0],
            num: el.split("-")[1],
            status: el.split("-")[2]
        })
    })

    NpcPopup.value = true
}

// 重新开始探索剧情
const Restart = async () => {
    const res = await Axios("/Game/Restart", "POST", PlotList.value.plot);
    if (res.code == 200) {
        Alert({
            title: res.message,
            time: 2000, // 每个组件小时时间 默认值1s
            type: "success"  //组件类型
        })
        await Main.ScenarioAll()
        PlotExploration(PlotList.value.mapId)
    } else {
        Alert({
            title: res.message,
            time: 2000, // 每个组件小时时间 默认值1s
            type: "error"  //组件类型
        })
    }
}
// 探索剧情
const PlotExplorationId = async (id) => {
    if (id == "success" || id == "error") {
        PlotPopup.value = false
        return
    }

    PlotList.value.plot.plotId = id
    const res = await Axios("/Game/PlotExploration", "POST", PlotList.value.plot);
    if (res.code == 200) {
        Alert({
            title: res.message,
            time: 2000, // 每个组件小时时间 默认值1s
            type: "success"  //组件类型
        })
        await Main.ScenarioAll()
        PlotExploration(PlotList.value.mapId)
        // if (res.message) {
        //     console.log(1);
        // }
        await Main.PlayerUid()
        await Main.AtlasAll()
    } else {
        Alert({
            title: res.message,
            time: 2000, // 每个组件小时时间 默认值1s
            type: "error"  //组件类型
        })
    }
}

// 探索剧情
const PlotExploration = (id) => {
    // 过滤出地图信息
    let test = Main.MapList.mapInformations.filter(el => el.mapId == id)[0]
    if (test.state == 2) {
        Alert({
            title: "地图未激活无法探索",
            time: 2000, // 每个组件小时时间 默认值1s
            type: "error"  //组件类型
        })
        return
    }
    // 过滤出地图探索信息
    PlotList.value = null
    let list = Main.Plot.stories.filter(el => el.mapId == id)[0]
    if (!list) {
        Alert({
            title: "该地图无探索剧情",
            time: 2000, // 每个组件小时时间 默认值1s
            type: "error"  //组件类型
        })
        return
    }

    PlotList.value = JSON.parse(JSON.stringify(Main.Plot.stories.filter(el => el.mapId == id)[0]))


    PlotList.value.plotBranch = []
    PlotList.value.plot.plotBranch.forEach(el => {
        PlotList.value.plotBranch.push({
            name: el.split("-")[0],
            id: el.split("-")[1]
        })
    })
    PlotPopup.value = true

}

const UseSeed = async (item) => {
    if (ItemUseFlag.value) {
        ItemUseFlag.value = false
        if (item.itemType == "道具") {
            //  使用道具万能钥匙
            if (item.itemId == "dao4") {
                const res = await Axios("/Game/ChestMap", "POST", CoordinateList.value); // 
                if (res.code == 200) {

                    // 使用钥匙成功之后打开宝箱
                    await Main.AtlasAll()
                    Main.MapList.mapInformations.forEach(el => {
                        if (el.mapId == MapList.value.mapId) {
                            MapBrowse(el)
                            el.coordinate.forEach(el1 => {
                                if (el1.coordinateId[0] == CoordinateList.value.coordinateId[0] && el1.coordinateId[1] == CoordinateList.value.coordinateId[1]) {
                                    Coordinate(el1)
                                }
                            })
                        }
                    })
                    Alert({
                        title: res.message,
                        time: 2000, // 每个组件小时时间 默认值1s
                        type: "success"  //组件类型
                    })
                    ItemUsePopup.value = false
                    ItemObtained.value = true
                    ItemObtainedList.value = res.data

                } else {
                    Alert({
                        title: res.message,
                        time: 2000, // 每个组件小时时间 默认值1s
                        type: "error"  //组件类型
                    })
                }
            } else {
                CoordinateList.value.npc.icon = item.itemId
                const res = await Axios("/Game/PropertyUse", "POST", CoordinateList.value.npc); // 保存当前信息
                if (res.code == 200) {

                    // 使用钥匙成功之后打开宝箱
                    await Main.AtlasAll()
                    Main.MapList.mapInformations.forEach(el => {
                        if (el.mapId == MapList.value.mapId) {
                            MapBrowse(el)
                            el.coordinate.forEach(el1 => {
                                if (el1.coordinateId[0] == CoordinateList.value.coordinateId[0] && el1.coordinateId[1] == CoordinateList.value.coordinateId[1]) {
                                    Coordinate(el1)
                                }
                            })
                        }
                    })

                    Alert({
                        title: res.message,
                        time: 2000, // 每个组件小时时间 默认值1s
                        type: "success"  //组件类型
                    })


                } else {
                    Alert({
                        title: res.message,
                        time: 2000, // 每个组件小时时间 默认值1s
                        type: "error"  //组件类型
                    })
                }
            }

        } else if (item.itemType == "地图") {

            const res = await Axios("/Game/UseItem", "POST", item); // 保存当前信息
            if (res.code == 200) {
                Main.AtlasAll()
                Alert({
                    title: "激活成功",
                    time: 2000, // 每个组件小时时间 默认值1s
                    type: "success"  //组件类型
                })

            } else {
                Alert({
                    title: res.message,
                    time: 2000, // 每个组件小时时间 默认值1s
                    type: "error"  //组件类型
                })
            }
        }
        Main.ADDCHARACTERS()
        ItemUsePopup.value = false
        ItemUseFlag.value = true
    }
}
// 探索
const ExploreMap = async () => {
    if (Main.Character.satiety < 2) {
        Alert({
            title: "饱食度小于2无法探索",
            time: 2000, // 每个组件小时时间 默认值1s
            type: "error"  //组件类型
        })
        return
    }

    const res = await Axios("/Game/ExploreMap", "POST", CoordinateList.value); // 保存当前信息
    if (res.code == 200) {
        IncidentWord.value = res.data.incidentWord
        IncidentRewards.value = res.data.incidentRewards
        IncidentTitle.value = res.data.incidentTitle
        Main.ADDCHARACTERS()
        IncidentPopup.value = true
        await Main.AtlasAll()
        Main.MapList.mapInformations.forEach(el => {
            if (el.mapId == MapList.value.mapId) {
                MapBrowse(el)
                el.coordinate.forEach(el1 => {
                    if (el1.coordinateId[0] == CoordinateList.value.coordinateId[0] && el1.coordinateId[1] == CoordinateList.value.coordinateId[1]) {
                        Coordinate(el1)
                    }
                })
            }
        })


    } else {
        Alert({
            title: res.message,
            time: 2000, // 每个组件小时时间 默认值1s
            type: "error"  //组件类型
        })
    }
}

// 详细地图返回
const MapBack = () => {
    MapListPopup.value = false
    Main.ADDCHARACTERS()
}

// 打开宝箱
const Unlock = ref((type, title, num) => {
    if (Main.Character.satiety < 2) {
        Alert({
            title: "饱食度小于2无法探索",
            time: 2000, // 每个组件小时时间 默认值1s
            type: "error"  //组件类型
        })
        return
    }
    // 判断背包中是否存在钥匙
    ItemUseList.value = []
    let seed = JSON.parse(JSON.stringify(Main.Character.itemDetails))
    if (num == 1) {
        let item = Main.Character.itemDetails.filter(el => el.itemId == "dao4")
        if (item.length <= 0) {
            Alert({
                title: "您没有钥匙无法打开宝箱",
                type: "error",
                time: 3000,
            })
            return
        }
        ItemUseList.value = seed.filter(el => el.itemId == "dao4")
    } else if (num == 2) {
        let item = Main.Character.itemDetails.filter(el => el.itemType == type && el.itemId != "dao4")

        if (item.length <= 0) {
            Alert({
                title: title,
                type: "error",
                time: 3000,
            })
            return
        }
        ItemUseList.value = seed.filter(el => el.itemType == "道具" && el.itemId != "dao4")
    }


    // ItemUseList.value = seed.filter(el => el.itemType == type)

    ItemUseError.value = title
    ItemUsePopup.value = true

})


// 点击地图坐标
const Coordinate = (item) => {
    CoordinateList.value = JSON.parse(JSON.stringify(item))
}

// 地图浏览
const MapBrowse = (item) => {
    if (item.state == 2) {
        Alert({
            title: "地图未激活",
            time: 2000,
            type: "error"
        })
        return
    }
    if (MapList.value != null) {
        let list = JSON.parse(JSON.stringify(MapList.value))
        if (list.mapId != item.mapId) {
            CoordinateList.value = null
        }
    }

    MapList.value = null
    MapList.value = item
    MapListInfortion.value = {
        npc: 0,
        Chest: 0,
        incident: 0
    }
    MapList.value.coordinate.forEach(el => {
        if (el.coordinateType == 2) {
            el.icon = ren
            MapListInfortion.value.npc += 1
        } else if (el.coordinateType == 3) {
            MapListInfortion.value.Chest += 1
            el.icon = Bx
        }
        MapListInfortion.value.incident += el.incident
    });
    MapListPopup.value = true
    MapDrawer.value = false


}
// 控制地图信息显示
const MapDrawerBut = (type) => {
    MapPlot.value = type
    MapDrawer.value = true;
}
// 控制地图详情弹窗开启
const FlagMapDetailsPopup = () => {
    MapDetailsPopup.value = true
}
onMounted(async () => {
    Loging.value = true
    const res = await Main.AtlasAll();

    if (res) {
        Loging.value = false
        FlagMapDetailsPopup()
        setTimeout(() => {
            MapDetailsPopup.value = false
        }, 10000)
    } else {
        MapInformationPopup.value = false
    }


})
onBeforeUnmount(() => {
})
</script>

<style lang="scss" scoped>
.Rewards {
    display: flex;

    .RewardsBox {
        width: 25%;
        text-align: center;
        border: 1px dashed #888;
        padding: 2px;
        box-sizing: border-box;


        .RewardsBoxName {
            height: 50%;
        }
    }

    button {
        margin: 0;
    }
}

.Plot {
    height: 80vh;

    .PlotHeader {
        height: 15%;
        border-bottom: 1px dashed #888;
        padding: 8px;

        .PlotHeaderContent {
            display: grid;
            grid-template-columns: repeat(3, 32%);

            span {
                display: inline-block;
                text-align: center;
            }
        }

    }

    .PlotContent {
        height: 80%;

        .PlotContentBox {
            height: 100%;
            overflow-y: auto;

            .PlotContentBoxContent {
                text-indent: 2em;
                margin-top: 10px;
            }
        }
    }
}

.MapListPopup {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba($color: #fff, $alpha: 1);
    color: #000;

    .MapListHeader {
        height: 18%;
        width: 100%;
        box-shadow: -2px 1px 7px 5px rgba($color: #888888, $alpha: 0.4);
        padding: 8px;
        box-sizing: border-box;

        .MapListHeaderBox {
            height: 100%;
            overflow-y: auto;

            sub {
                cursor: pointer;
                color: aqua;
            }
        }

        .MapListHeaderContent {
            display: grid;
            grid-template-columns: repeat(3, 32%);
            gap: 10px;
            box-sizing: border-box;
            justify-content: center;

            span {
                display: inline-block;
                text-align: center;
            }
        }
    }

    .MapListMain {
        padding: 20px;
        height: 64%;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;

        .MapListMainBox {
            height: 100%;
            overflow-y: auto;
            display: grid;
            grid-template-columns: repeat(10, 10%);
            box-sizing: border-box;

            .MapListMainBoxData {
                border: 1px solid #888888;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                height: 50px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

    }

    .MapListFooter {
        height: 18%;
        width: 100%;
        box-shadow: -2px 1px 7px 5px rgba($color: #888888, $alpha: 0.4);
        padding: 8px;
        box-sizing: border-box;
        position: fixed;
        bottom: 0;

        .MapListFooterMain {
            height: 100%;
            overflow-y: auto;
        }

        .MapListFooterBox {
            height: 100%;
            display: grid;
            grid-template-columns: repeat(3, 32%);
            justify-content: center;

        }

        .MapListFooterTotal {
            display: flex;
            align-items: center;
            padding: 4px;
            border: 1px dashed #888;

            /*    .discourse {
                display: inline-block;
            }*/
        }

        .MapListFooterModel2 {
            text-indent: 2em;
        }
    }
}

.MapdetailsBox {
    width: 100%;
    height: 100%;
    text-align: center;

    .Mapdetails {
        height: 100%;
        overflow-y: auto;
    }
}

.ItemUsePopupBox {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .ItemUsePopup {
        height: 100%;
        overflow-y: auto;

        .ItemUsePopupChildren {
            border: 1px solid #aaa;

        }

        .Name {
            position: relative;
            box-sizing: border-box;
        }

        .Use {
            text-align: center;
            cursor: pointer;
            color: #5106ff;
        }

    }
}

.moduleOne {
    .moduleOneBox {
        width: 50%;

        display: grid;
        grid-template-columns: repeat(4, 24%);
        gap: 4px;
        box-sizing: border-box;

        .moduleOneCentent {
            text-align: center;

            img {
                width: 80%;
            }

            p {
                text-align: center;
            }
        }
    }
}

.MapDetailsPopup {
    text-indent: 2em;
}

.Color2 {
    color: #00FFFF !important;
}

.Color3 {
    color: #FAC000 !important;
}
</style>